<template>
  <div class="comment-list">
    <div class="info">
      <span>评论 {{ commentCount }} 条</span>
    </div>
    <div class="comment-detail" v-for="(item, index) in data" :key="item?.id">
      <CommentItem
        :data="item"
        :comment-index="index + ''"
        :currentCommentIndex="currentCommentIndex"
        @replyBtnHandle="replyBtnHandle"
        @send-btn="sendBtn"
      />
      <div class="second-comment">
        <CommentItem
          avatar-size="30px"
          v-for="(ite, i) in item?.children"
          :key="ite.id"
          :data="ite"
          :comment-index="index + '-' + i"
          :currentCommentIndex="currentCommentIndex"
          :fatherUserId="item.userId"
          @replyBtnHandle="replyBtnHandle"
          @send-btn="sendBtn"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommentItem from "./CommentItem.vue";
import { ref, computed, toRefs } from "vue";

const emit = defineEmits(["sendBtn"]);

const props = defineProps({
  data: {
    type: Array as () => Array<any>,
    required: true
  }
});

const { data } = toRefs(props);

let currentCommentIndex = ref("");

function replyBtnHandle(val: string) {
  if (currentCommentIndex.value === val) {
    currentCommentIndex.value = "";
  } else {
    currentCommentIndex.value = val;
  }
}

function sendBtn(val: string, data: any) {
  emit("sendBtn", val, data);
  currentCommentIndex.value = "";
}

const commentCount = computed(() => {
  let count = 0;
  data.value.forEach(t => {
    count += t.children.length;
  });

  count += data.value.length;

  return count;
});
</script>

<style lang="scss" scoped>
.comment-list {
  width: 100%;

  .info {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 20px 0;

    span {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .second-comment {
    padding-left: 50px;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 20px;
  }
}
</style>
